<template>
  <div class="community-detail-container">
    <!-- 左侧作者区域 -->
    <div class="start_author">
      <div class="start_author_content">
        <!-- 作者信息区域 -->
        <div class="author_info">
          <!-- 头像 -->
          <div
            class="author_avatar"
            @click="$router.push(`/center/${author.id}`)"
          >
            <img v-lazy="author.profile" class="img-fluid w-100 h-100" alt="" />
            <!-- 在线状态 -->
            <div class="circle_box">
              <div class="circle">
                <div class="inner_circle"></div>
              </div>
            </div>
          </div>
          <!-- 作者昵称 -->
          <div
            class="atuhor_nickname"
            @click="$router.push(`/center/${author.id}`)"
          >
            {{ author.nickName | uncodeUtf16 }}
          </div>
          <!-- 私信关注 -->
          <div class="personal_attention">
            <button class="private">私信</button>
            <button
              class="attention"
              :class="concern ? 'active' : ''"
              @click="myConcern"
            >
              <i
                class="el-icon-plus"
                :style="concern ? 'display:none;' : 'display:inline-block;'"
              ></i>
              {{ concern ? "取关" : "关注" }}
            </button>
          </div>
          <!-- 该篇文章基本信息 -->
          <div class="baseInfo">
            <div class="baseInfo_item">
              <span class="text">{{
                articleData.comment | numberConvert
              }}</span>
              <span>评论</span>
            </div>
            <div class="baseInfo_solid"></div>
            <div class="baseInfo_item">
              <span class="text">{{ articleData.agree | numberConvert }}</span>
              <span>点赞</span>
            </div>
            <div class="baseInfo_solid"></div>
            <div class="baseInfo_item">
              <span class="text">{{ articleData.browse | numberConvert }}</span>
              <span>浏览</span>
            </div>
          </div>
        </div>
        <!-- 滚动时需要固定的内容 -->
        <div class="fixedContent">
          <!-- 主题标签区域 -->
          <div class="themeTagsContent">
            <!-- 主题标签标题 -->
            <div class="theme">文章相关标签展示</div>
            <!-- 展示标签 -->
            <div class="webapp-menu-label">
              <div
                class="webapp-menu-label-box"
                v-for="(item, index) in computedTagsObj"
                :key="index"
              >
                <div class="webapp-menu-label-box-icon">
                  <i class="iconfont" :class="item.icon"></i>
                </div>
                <div class="webapp-menu-label-box-name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 作者其他文章 -->
          <div class="author_other_article">
            <!-- 作者其他文章标题 -->
            <div class="theme">作者其他文章</div>
            <!-- 文章列表 -->
            <ul class="author_list">
              <li v-for="item in author_article" :key="item.article_id">
                <p>
                  <a
                    :title="item.title | uncodeUtf16"
                    href="javascript:;"
                    @click="toDetail(item.article_id)"
                    >{{ item.title | uncodeUtf16 }}</a
                  >
                </p>
              </li>
            </ul>
            <!-- 查看更多文章 -->
            <p>{{ author_article.length > 0 ? "查看更多" : "暂无文章" }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧文章内容区域 -->
    <div class="end_article_content">
      <!-- 编辑器盒子 -->
      <div class="end_article_markdown" ref="markElem">
        <!-- 文章标题 -->
        <div class="end_article_title">
          <div class="big_title">
            {{ articleData.title | uncodeUtf16 }}
          </div>
          <!-- 文章信息 -->
          <div class="article_info">
            <div class="info_user">
              <i class="iconfont icon-yonghu"></i>
              <span>{{ articleData.author_name | uncodeUtf16 }}</span>
            </div>
            <div class="info_date">
              <i class="iconfont icon-date"></i>
              <span>{{ articleData.updateTime | format }}</span>
            </div>
            <div class="info_comment">
              <i class="iconfont icon-duihua"></i>
              <span>{{ articleData.comment }}</span>
            </div>
            <div class="info_browse">
              <i class="iconfont icon-yanjing"></i>
              <span>{{ articleData.browse }}</span>
            </div>
            <div class="info_agree">
              <i class="iconfont icon-aixinxiantiao"></i>
              <span>{{ articleData.agree }}</span>
            </div>
          </div>
          <!-- mobile移动端作者信息 -->
          <div class="detail_mobile_author">
            <div class="detail_mobile_author_info">
              <div class="detail_mobile_author_img">
                <img
                  v-lazy="author.profile"
                  class="img-fluid w-100 h-100"
                  alt=""
                />
              </div>
              <div class="detail_mobile_author_content">
                <div class="detail_mobile_author_content_title">
                  {{ author.nickName }}
                </div>
                <div class="detail_mobile_author_content_description">
                  {{ `码龄${author.createTime}` | transformUserInfoTime }}
                </div>
              </div>
            </div>
            <div class="detail_mobile_author_concern">
              <button
                class="attention"
                :class="concern ? 'active' : ''"
                @click="myConcern"
              >
                <i
                  class="el-icon-plus"
                  :style="concern ? 'display:none;' : 'display:inline-block;'"
                ></i>
                {{ concern ? "取关" : "关注" }}
              </button>
            </div>
          </div>
        </div>
        <!-- markdown编辑器 -->
        <mavon-editor
          :value="articleData.content"
          ref="markdown"
          class="myEditor"
          previewBackground="#fff"
          :stripIgnoreTag="false"
          codeStyle="androidstudio"
          :navigation="false"
          fontSize="16px"
          :editable="false"
          :toolbarsFlag="false"
          :subfield="false"
          defaultOpen="preview"
        >
        </mavon-editor>
        <!-- 点赞和收藏该文章 -->
        <div class="agreeAndCollect" ref="agreeElem">
          <div class="zancang">
            <div class="zan">
              <button @click="zan">
                <i
                  class="iconfont"
                  :class="!agree ? 'icon-good' : 'icon-xiaolian'"
                ></i>
                <span>{{ !agree ? "点赞" : "感谢" }}</span>
              </button>
            </div>
            <div class="cang">
              <button @click="cang">
                <i
                  class="iconfont"
                  :class="!collect ? 'icon-shoucang1' : 'icon-shoucang_shixin'"
                ></i>
                <span>{{ !collect ? "收藏" : "已收" }}</span>
              </button>
            </div>
          </div>
        </div>
        <!-- 评论区域 -->
        <MyComment
          :quantity="articleData.comment"
          :article_id="articleData.article_id"
          :comment="comment"
        ></MyComment>
      </div>
    </div>
    <!-- 目录 -->
    <div class="toc" v-if="tocs.length > 0">
      <div class="title"><span>#</span> 本页目录</div>
      <div class="menuBox">
        <div class="titleBox">
          <!-- 遍历目录 -->
          <div
            v-for="toc in tocs"
            :key="toc.name"
            :style="toc.indent ? `text-indent:${toc.indent}` : ''"
          >
            <a
              @click="updateSelectStyle(toc.top)"
              v-html="toc.name"
              :style="toc.active ? 'color:#0dce9e' : ''"
            ></a>
          </div>
        </div>
      </div>
    </div>
    <!-- 返回顶部栏 -->
    <GoBack></GoBack>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { throttle } from "lodash";
import { augment } from "@/api/article.js";
import { userAugment, addHistory } from "@/api/users.js";
import { offsetDomTop, scrolltoToc, monitorFloor } from "@/utils/menuScroll";
import { mapState } from "vuex";
import { addCodeBtn } from "@/utils/mavon";
import MyComment from "../Comment";
import $ from "jquery";
import { getToken } from "@/utils/auth";
import Message from "@/utils/message";
let showMessage = new Message();

export default {
  name: "CommunityDetail",
  components: { MyComment },
  computed: {
    ...mapState("tags", ["menu_content"]),
    ...mapState("user", ["userInfo"]),
    // 计算所有标签对象
    computedTagsObj() {
      if (this.menu_content.length === 0 || !this.articleData.tags) return;
      let results = [];
      // 对文章所有标签每一个分类都进行查找
      JSON.parse(this.articleData.tags).forEach((elem) => {
        // 找到的对应分类标签数组
        const tagsArr = this.menu_content.find((item) => {
          if (elem.id === item.id && elem.content.length > 0) {
            return item;
          }
        });

        // 匹配到空的数据，则跳出这次函数
        if (tagsArr === undefined) return;

        // 存储对应的标签
        let tags = [];
        let index = 0;
        do {
          // 数组查找对应一样的id, 把正确的元素压入tags, 如果标签数量不一致, 则继续筛选一遍
          let tag = tagsArr.content.find((item) => {
            if (item.id === elem.content[index]) {
              index++;
              return item;
            }
          });
          tags.push(tag);
        } while (tags.length !== elem.content.length);

        // 将得到的数组和最终数组进行拼接
        results = [...results, ...tags];
      });
      return results;
    },
  },
  data() {
    return {
      // 文章数据
      articleData: {},
      // 点击收藏和赞时，获取的新数据
      newArticleData: {},
      // 作者信息
      author: {},
      // 作者其他文章
      author_article: [],
      // 存储的a标签元素
      tocs: [],
      // 当前高亮的目录
      activeMenuIndex: -1,
      // 最后一个目录高度
      afterMenuTop: 0,
      // 评论数据
      comment: [],
      // 点赞收藏
      agree: false,
      collect: false,
      concern: false,
    };
  },
  watch: {
    // 监听文章数据获得后
    articleData() {
      // 获取作者信息
      const author_id = this.articleData?.author_id;
      this.$api.getUserInfo(author_id).then((result) => {
        this.author = result.data;
        // 发送浏览记录
        this.sendBrowseHistory();
      });
      // 获取作者其他文章
      this.$api.getUserArticle(author_id).then((result) => {
        let temp = 0;
        // 判断有没有本篇文章，有的话将其剔除
        this.author_article = result.data.filter((item) => {
          // 只需要返回七个数据即可
          if (temp >= 6) return;
          // 将本篇内容剔除
          if (this.articleData.article_id !== item.article_id) {
            temp++;
            return item;
          }
        });
      });
      // 判断作者是否对该篇文章点赞或收藏过，点赞过和收藏过将其更改状态
      this.isArticleZanShou();
      // 获取目录最后一层截止高度
      this.$nextTick(() => {
        this.afterMenuTop = this.$refs.agreeElem.offsetTop;
      });
      // 获取用于创建目录DOM元素
      this.getTocs();
      // 处理私信和关注显示隐藏
      let elc = $(".personal_attention");
      if (this.articleData.author_id === this.userInfo.user_id) {
        elc.hide();
      }
    },
    $route() {
      // 监听相同路由下参数变化的时候，从而实现异步刷新
      // 重新获取文章数据
      this._initGetArticle(this.$route.params.id);
      // 增加浏览量
      this.toolRequest("liu");
      // 获取评论数据
      this.commentData();
    },
  },
  methods: {
    ...mapActions("user", { updateUserInfo: "updateUserInfo" }),
    // 发送浏览记录
    sendBrowseHistory() {
      // 没有登录不记录浏览记录
      if (!getToken()) return;
      let data = JSON.stringify({
        time: +new Date(),
        content: {
          author_id: this.author.id,
          author_avatar: this.author.profile,
          author_name: this.$emoji.utf16toEntities(this.author.userName),
          article_id: this.articleData.article_id,
          article_title: this.$emoji.utf16toEntities(this.articleData.title),
        },
      });
      addHistory({
        user_id: this.userInfo.user_id,
        data,
      });
    },
    // 获取文章数据
    async _initGetArticle(id, newValue = false) {
      const result = await this.$api.acquire(id);
      if (!newValue) {
        this.articleData = result.data;
      } else {
        this.newArticleData = result.data;
      }
    },
    // 跳转到详情页
    toDetail(id) {
      this.$router.push({
        path: `/community/detail/${id}`,
      });
    },
    // 获取DOM元素
    getTocs() {
      // $nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。
      this.$nextTick(() => {
        const aArr =
          this.$refs.markdown.$refs.vShowContent.querySelectorAll("a");
        let tocs = [];
        // 给每一个节点追加到数组
        for (var i = 0; i < aArr.length; i++) {
          if (aArr[i].id) {
            let name = aArr[i].parentNode.innerText;
            // 如果匹配到引用的话不计算进目录
            if (/\[[0-9][0-9]*\]/.test(name)) continue;
            let href = aArr[i].id;
            let parentNode = aArr[i].parentNode.localName;
            let position = offsetDomTop(document.getElementById(href));
            // 没有节点的话，就不进行添加
            if (position.top) {
              // 64 是因为有着导航条的高度
              let top = position.top - 64;
              tocs.push({
                // href: "#" + href, jqurey id选择器需要#
                href: href,
                name,
                parentNode,
                top,
                active: false,
              });
            }
          }
        }
        // 处理缩进样式
        let no1 = +tocs[0].parentNode.split("h")[1];
        for (var i = 0; i < tocs.length; i++) {
          for (let j = 1; j < 7; j++) {
            // 如果和第一个标题一致，则不进行添加缩进
            if (tocs[i].parentNode === `h${no1}`) break;
            // 如果为它的小标题，则增加缩进
            if (tocs[i].parentNode === `h${no1 + j}`) {
              tocs[i].indent = `${j}em`;
              break;
            }
          }
        }
        this.tocs = tocs;
      });
    },
    // 给document添加滚动条事件
    bodyScroll() {
      const eElem = $(".community-detail-container .author_info")[0];
      if (!eElem) return;
      const eTop = eElem.offsetHeight;
      const target = $(".community-detail-container .fixedContent");
      $(document).on("scroll", () => {
        const winTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        // 当大于文章相关标签时，控制其变成固定定位
        if (winTop > eTop + 16) {
          target.addClass("active");
          const width = $(
            ".community-detail-container .start_author_content"
          ).width();
          target.css("width", width);
        } else {
          target.removeClass("active");
          target.css("width", "100%");
        }
        this.activeMenuIndex = monitorFloor(
          this.activeMenuIndex,
          winTop,
          this.tocs,
          this.afterMenuTop
        );
      });
    },
    // 点击目录更新active选中效果，并实现滚动条定位指定位置
    updateSelectStyle(top) {
      scrolltoToc(top);
    },
    // 判断该文章是否收藏过
    isArticleZanShou() {
      if (this.userInfo.agree) {
        const jsonAgree = JSON.parse(this.userInfo.agree).content.find(
          (item) => {
            if (item === this.articleData.article_id) return true;
          }
        );
        jsonAgree === undefined ? (this.agree = false) : (this.agree = true);
      }
      if (this.userInfo.collect) {
        const jsonCollect = JSON.parse(this.userInfo.collect).content.find(
          (item) => {
            if (item === this.articleData.article_id) return true;
          }
        );
        jsonCollect === undefined
          ? (this.collect = false)
          : (this.collect = true);
      }
      if (this.userInfo.concern) {
        const jsonCollect = JSON.parse(this.userInfo.concern).content.find(
          (item) => {
            if (item === this.articleData.author_id) return true;
          }
        );
        jsonCollect === undefined
          ? (this.concern = false)
          : (this.concern = true);
      }
    },
    // 发起文章收藏浏览评论相关请求
    async toolRequest(flag, children = true) {
      if (!getToken()) {
        return showMessage.error({
          message: "只有登录后才能使用哦😋",
          type: "error",
          duration: 5 * 1000,
          offset: 80,
        });
      }

      const reqArr = ["agree", "collect", "browse", "concern", "fans"];
      let reqIndex = -1;

      // 获取文章数据，以免出现数据出错问题
      await this._initGetArticle(this.$route.params.id, true);

      // 确定传入参数
      switch (flag) {
        case "zan":
          reqIndex = 0;

          // 确定是+1还是减1
          const num = this.agree
            ? +this.newArticleData.agree - 1
            : +this.newArticleData.agree + 1;
          // 开始更新文章点赞数据
          augment(this.newArticleData.article_id, `agree~${num}`);
          break;
        case "cang":
          reqIndex = 1;
          break;
        case "liu":
          reqIndex = 2;

          // 确定是+1还是减1
          const num2 = +this.newArticleData.browse + 1;
          // 开始更新文章点赞数据
          augment(this.newArticleData.article_id, `browse~${num2}`);
          break;
        case "ping":
          reqIndex = 10;
          // 开始更新文章点赞数据
          // 确定是+1还是减1
          const num3 = children
            ? +this.newArticleData.comment + 1
            : +this.newArticleData.comment - 1;
          augment(this.newArticleData.article_id, `comment~${num3}`);
          break;
        case "guan":
          reqIndex = 3;
          break;
        case "fen":
          reqIndex = 4;
          break;
      }
      if (reqIndex !== 2 && reqIndex !== 10 && reqIndex !== -1) {
        // 提取出要指定的数据名
        let attr = reqArr[reqIndex];

        // 开始更新指定数据
        // 初始内容为空则初始化数据
        // 初始内容不为空则将其解码为正常对象

        let newValue = null;

        // 如果删除粉丝的数量，则需要从对方的用户信息上获取
        if (reqIndex === 4) {
          newValue = !this.author[attr]
            ? { content: [] }
            : JSON.parse(this.author[attr]);
        } else {
          newValue = !this.userInfo[attr]
            ? { content: [] }
            : JSON.parse(this.userInfo[attr]);
        }
        let newObj = { content: [] };

        // 确定是增加还是删除该指定内容数据
        if (attr === "fans" ? !this["concern"] : this[attr]) {
          // 删除，判断是删除用户id还是文章id
          if (reqIndex === 3 || reqIndex === 4) {
            let flag =
              reqIndex === 3
                ? this.newArticleData.author_id
                : this.userInfo.user_id;
            newObj.content = newValue.content.filter((item) => {
              if (item !== flag) return item;
            });
          } else {
            newObj.content = newValue.content.filter((item) => {
              if (item !== this.newArticleData.article_id) return item;
            });
          }
        } else {
          // 增加，判断是增加用户id还是文章id
          if (reqIndex === 3 || reqIndex === 4) {
            newObj.content = [
              ...new Set([
                ...newValue.content,
                reqIndex === 3
                  ? this.newArticleData.author_id
                  : this.userInfo.user_id,
              ]),
            ];
          } else {
            newObj.content = [
              ...new Set([...newValue.content, this.newArticleData.article_id]),
            ];
          }
        }

        // 增加用户指定数据，如粉丝，关注，点赞等等
        await userAugment(
          this.newArticleData.article_id,
          reqIndex === 4 ? this.articleData.author_id : this.userInfo.user_id,
          `${attr}~${JSON.stringify(newObj)}`
        );
        if (reqIndex !== 4) {
          this[attr] = !this[attr];
        }
        // 更新全局用户信息
        this.updateUserInfo();
        // 如果点击的是关注，则接着触发增加该作者粉丝
        if (reqIndex === 3) {
          this.toolRequest("fen");
        }
      }
    },
    // 获取评论数据
    commentData() {
      this.$api.gain({ article_id: this.$route.params.id }).then((result) => {
        this.comment = result.data;
      });
    },
    // 关注点击事件
    myConcern: throttle(function () {
      this.toolRequest("guan");
    }, 2000),
    zan: throttle(function () {
      this.toolRequest("zan");
    }, 2000),
    cang: throttle(function () {
      this.toolRequest("cang");
    }, 2000),
  },
  mounted() {
    // 获取文章数据
    this._initGetArticle(this.$route.params.id);
    // 给document添加滚动条事件
    this.bodyScroll();
    // 增加浏览量
    this.$api.addBrowse(this.$route.params.id);
    // 获取评论数量
    this.commentData();
  },
  updated() {
    // 给代码块追加行号和复制按钮
    addCodeBtn();
  },
  destroyed() {
    $(document).off("scroll");
  },
};
</script>

<style lang="less">
@media screen and (max-width: 1400px) {
  .community-detail-container {
    .start_author {
      display: none;
    }
  }
}
@media screen and (max-width: 1100px) {
  .community-detail-container {
    width: 100vw !important;
    .end_article_markdown {
      padding: 34px 44px !important;
    }
    .toc {
      display: none;
    }
  }
}

@circle_size: 14px;
@inner_circle_size: 8px;
@avatar_size: 60px;

.community-detail-container {
  display: flex;
  width: calc(100vw - 300px);
  height: 100%;
  // mobile移动端作者信息
  .detail_mobile_author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8e8ed;
    padding-bottom: 10px;
    margin-top: 16px;
    .detail_mobile_author_info {
      display: flex;
      align-items: center;
      font-size: 14px;
      .detail_mobile_author_img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 12px;
      }
      .detail_mobile_author_content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
    }
    .detail_mobile_author_concern {
      & > button {
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 12px;
        white-space: nowrap;
      }
      .private {
        color: var(--a-button-hover-color);
        border: 1px solid var(--a-button-hover-color);
        background: rgba(255, 255, 255, 0);
      }
      .attention {
        &.active {
          opacity: 0.5;
          transition: opacity 0.4s;
          &:hover {
            opacity: 1;
          }
        }
        background: #0dce9e;
        border: 1px solid #0dce9e;
        color: #fff;
        margin-left: 6px;
      }
    }
  }
  .fixedContent.active {
    position: fixed;
    top: 50px;
  }
  ul {
    list-style-type: none;
    padding-left: 0 !important;
    li {
      text-align: left;
    }
  }
  .start_author {
    padding-right: 40px;
    padding-left: 63px;
    box-shadow: 4px 0 12px rgb(0 0 0 / 8%), 0 0 1px rgb(1 0 0 / 10%);
    .start_author_content {
      max-width: 280px;
      min-width: 240px;
      margin-left: auto;
      height: 100%;
      .author_info {
        width: 100%;
        padding-top: 50px;
        .author_avatar {
          position: relative;
          width: @avatar_size;
          height: @avatar_size;
          cursor: url("@/assets/mouse/x2.cur"), auto !important;
          margin: 0 auto;
          img {
            border-radius: 50%;
          }
          .circle_box {
            position: absolute;
            /* 水平垂直居中 */
            position: absolute;
            top: 91%;
            left: 83%;
            transform: translate(-50%, -50%);
            .circle {
              position: relative;
              width: @circle_size;
              height: @circle_size;
              background: #fff;
              border-radius: 50%;
              .inner_circle {
                /* 水平垂直居中 */
                position: absolute;
                top: 53%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #6db93f;
                width: @inner_circle_size;
                height: @inner_circle_size;
                border-radius: 50%;
              }
            }
          }
        }
        .atuhor_nickname {
          margin-top: 14px;
          cursor: url("@/assets/mouse/x2.cur"), auto !important;
          font-size: 16px;
          height: 24px;
        }
        .personal_attention {
          margin-top: 16px;
          & > button {
            padding: 4px 16px;
            border-radius: 20px;
            font-size: 12px;
            white-space: nowrap;
          }
          .private {
            color: var(--a-button-hover-color);
            border: 1px solid var(--a-button-hover-color);
            background: rgba(255, 255, 255, 0);
          }
          .attention {
            &.active {
              opacity: 0.5;
              transition: opacity 0.4s;
              &:hover {
                opacity: 1;
              }
            }
            background: #0dce9e;
            border: 1px solid #0dce9e;
            color: #fff;
            margin-left: 6px;
          }
        }
        .baseInfo {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 60px;
          margin-top: 12px;
          .baseInfo_item {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            font-size: 12px;
            color: #909399;
            width: 28.333%;
            .text {
              font-size: 18px;
              // font-weight: bold;
              color: #666666;
            }
          }
          .baseInfo_solid {
            display: inline-block;
            width: 1px;
            height: 30px;
            background: #edeff2;
          }
        }
      }
      .themeTagsContent {
        border-top: 1px solid rgb(232, 232, 232);
        border-bottom: 1px solid rgb(232, 232, 232);
        margin: 12px 0;
        padding: 10px 8px 6px;
        .theme {
          text-align: left;
          margin-bottom: 12px;
        }
        .webapp-menu-label {
          display: flex;
          flex-wrap: wrap;
          .webapp-menu-label-box {
            display: flex;
            align-items: center;
            transition: border 0.4s;
            &:hover {
              border: 1px solid #a9aaaa;
            }
            border: 1px solid #dbdee0;
            border-radius: 6px;
            font-size: 14px;
            padding: 2px 8px;
            text-align: center;
            margin: 0 12px 12px 0;
            .webapp-menu-label-box-icon {
              margin-right: 4px;
              i {
                font-size: 14px;
              }
            }
            .webapp-menu-label-box-name {
              color: #737373;
            }
          }
        }
      }
      .author_other_article {
        padding: 0 8px;
        .theme {
          text-align: left;
          margin-bottom: 2px;
        }
        // 出现浮入效果
        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          transition: color 0.4s;
          &:hover {
            color: var(--a-button-hover-color) !important;
          }
        }
        .author_list {
          li {
            p {
              padding: 8px 0;
              border-bottom: 1px solid rgba(43, 51, 59, 0.1);
              margin-bottom: 0 !important;
              a {
                font-size: 14px;
                color: #838a90;
                /* 省略号 */
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                -webkit-box-orient: vertical;
              }
            }
          }
        }
        & > p {
          color: #323232;
          font-size: 14px;
          text-align: left;
          margin-top: 4px;
        }
      }
    }
  }
  .end_article_content {
    flex: auto;
    overflow: hidden;
    .end_article_markdown {
      width: 100%;
      // padding: 44px 60px;
      padding: 30px 10px 30px 46px;
      // 文章标题
      .end_article_title {
        .big_title {
          text-align: left;
          font-size: 22px;
          margin-top: 18px;
        }
      }
      .article_info {
        display: flex;
        margin: 6px 0 8px;
        flex-wrap: wrap;
        .info_user {
          max-width: 110px;
          /* 省略号 */
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        i,
        span {
          color: #9c9c9c;
          font-size: 14px;
        }
        i {
          margin-right: 4px;
        }
        & > div {
          margin-right: 24px;
        }
      }
      // 点赞和收藏该文章
      .agreeAndCollect {
        margin: 80px 0 30px;
        .zancang {
          justify-content: center;
          align-items: center;
          display: flex;
          i {
            font-size: 20px;
            margin-right: 4px;
          }
          span {
            margin-top: 2px;
          }
          & button {
            margin: 0 10px;
            border-radius: 100px;
            display: flex;
            align-items: center;
            padding: 4px 22px;
            font-size: 15px;
            min-width: 100px;
            border: 0;
          }
          .zan {
            button {
              transition: opacity 0.4s;
              background-color: #ff7c00;
              color: #fff;
              &:hover {
                opacity: 0.8;
              }
            }
          }
          .cang {
            button {
              background-color: #fff;
              color: #666666;
              border: 1px solid #666666;
              padding: 4px 22px;
              transition: color 0.4s, border 0.4s;
              &:hover {
                color: #999;
                border: 1px solid #999;
              }
            }
          }
        }
      }
    }
  }
  // 目录
  .toc {
    width: 260px;
    height: calc(100vh - 64px - 58px - 200px);
    position: fixed;
    right: 10px;
    top: 50%;
    z-index: 1400;
    /* 水平垂直居中 */
    transform: translateY(-50%);
    background: #fff;
    .title {
      margin-bottom: 6px;
      font-size: 18px;
      line-height: 24px;
      height: 24px;
      font-weight: 400;
      text-align: left;
      color: #444;
      span {
        color: var(--a-button-hover-color);
      }
    }
    .menuBox {
      height: 100%;
      text-align: left;
      overflow-y: auto;
      /* 调整滚动条样式 */
      /* 滚动条整体 */
      &::-webkit-scrollbar {
        width: 3px;
        height: 3px;
      }
      /* 滚动条滚轮部分 */
      &::-webkit-scrollbar-thumb {
        background: #abb8c3;
        border-radius: 6px;
      }
      .titleBox {
        border-left: 2px solid #e6e6e6;
        padding-left: 12px;
        padding-right: 4px;
        margin-left: 3px;
        div {
          margin-bottom: 6px;
        }
      }
      a {
        font-size: 14px;
        /* 省略号 */
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        transition: color 0.4s;
        &:hover {
          color: var(--a-button-hover-color);
        }
      }
    }
  }
  // 编辑器
  .v-note-wrapper {
    box-shadow: none !important;
    min-width: auto !important;
  }
  .v-show-content,
  .scroll-style,
  .scroll-style-border-radius {
    padding: 0 !important;
  }
}
</style>